<template>
  <el-container>
    <el-header>
      <h2>语音对话服务</h2>
    </el-header>
    <el-main>
      <el-form :model="form" label-width="150px">
        <el-form-item label="服务状态">
          <el-switch v-model="form.serviceStatus" />
        </el-form-item>

        <el-form-item label="用户偏好记忆">
          <el-switch v-model="form.userPreferenceMemory" />
        </el-form-item>

        <el-form-item label="习惯用语调整">
          <el-switch v-model="form.habitualAdjustment" />
        </el-form-item>

        <el-form-item label="上下文感知">
          <el-switch v-model="form.contextAwareness" />
        </el-form-item>

        <el-form-item label="澄清机制">
          <el-switch v-model="form.clarificationMechanism" />
        </el-form-item>

        <el-form-item label="提示用户重述">
          <el-switch v-model="form.promptUserRephrase" />
        </el-form-item>

        <el-form-item label="话题检测和切换">
          <el-switch v-model="form.topicDetectionSwitch" />
        </el-form-item>

        <el-form-item label="对话日志记录">
          <el-switch v-model="form.dialogLogRecording" />
        </el-form-item>

        <el-form-item label="反馈采集">
          <el-switch v-model="form.feedbackCollection" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      serviceStatus: true,
      userPreferenceMemory: true,
      habitualAdjustment: true,
      contextAwareness: true,
      clarificationMechanism: true,
      promptUserRephrase: false,
      topicDetectionSwitch: false,
      dialogLogRecording: false,
      feedbackCollection: false
    });

    const save = () => {
      ElMessage.success("保存成功！");
      console.log("保存的参数:", form.value);
      // 在这里可以添加实际的保存逻辑，例如 API 调用
    };

    const cancel = () => {
      ElMessage.info("取消操作");
      // 取消逻辑，可以重置表单或执行其他操作
    };

    return { form, save, cancel };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
